<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<c:import url="common.jsp"></c:import>
<title>帖子统计</title>
<script src="${zts}/statics/js/echarts.js"></script>
<script>
	function chartOne(){
		$.post("chartfirst.action",function(result){
			console.log(result);
			var chartDom = document.getElementById('main1');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				title: {
					text: '用户发布的帖子数量',
					// subtext: '纯属虚构',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
				},
				series : [
					{
						name: '帖子数量',
						type: 'pie',
						radius: '55%',
						data: result
					}
				]
			};
			option && myChart.setOption(option);
		},"json");
	}

	function chartTwo(){
		$.post("chartsecond.action",function(data){
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main2'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '用户帖子累计获赞',
					left: 'center'
				},
				tooltip: {},
				legend: {
					data:['数量']
				},
				xAxis: {
					data: data.names
				},
				yAxis: {},
				series: [{
					// name: '数量',
					type: 'bar',
					data: data.values
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},"json");
	}
</script>
</head>
<body>
	<c:import url="nav.jsp"></c:import>
	<div style="text-align: center;margin-bottom: 50px;padding-top: 20px">
		<button class="btn btn-info" onclick="chartOne()">用户发布帖子数量</button>
		<button class="btn btn-success" onclick="chartTwo()">帖子累计获赞数量</button>
	</div>
	<div id="main1" style="width: 50%;height:400px;float: left;"></div>
	<div id="main2" style="width: 50%;height:400px;float: left;"></div>

</body>
</html>